<template>
	<view>
		<view class="Popup" :class="{ show: !isHidden }">
			<img :src="logo_url" alt="logo" />
			<view class="title">授权提醒</view>
			<view class="tip">请授权头像等信息，以便为您提供更好的服务</view>
			<view class="bottom flex">
				<view class="item" @tap="close">随便逛逛</view>
				<button class="item grant" type="primary" open-type="getUserInfo" lang="zh_CN" @getuserinfo="setUserInfo">去授权</button>
			</view>
		</view>
		<view class="mask" :class="{ show: !isHidden }" :catchtouchmove="true" @tap="close"></view>
	</view>
</template>

<script>
import { checkLogin, checkWxLogin, getCodeLogin, wxGetUserInfo } from '@/common/tools/util';
import { mapGetters, mapMutations } from 'vuex';
import { login } from '@/api/user';

export default {
	props: {
		value: {},
		//是否自动登录
		isAuto: {
			type: Boolean,
			default: true
		},
		//是否关闭回到首页
		isGoIndex: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		value(value) {
			this.isHidden = value;
		},
		isHidden(value) {
			this.$emit('input', value);
		}
	},
	data() {
		return {
			isHidden: true,
			cloneIner: null,
			loading: false,
			errorSum: 0,
			errorNum: 3,
			logo_url: '/static/img/favicon_circle.png'
		};
	},
	mounted() {
		this.setAuthStatus();
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		...mapMutations({
			setToken: 'user/SET_TOKEN',
			setUser: 'user/SET_USER'
		}),
		/**
		 * 检测登录状态并执行自动登录
		 */
		setAuthStatus() {
			console.log('检测登录状态并执行自动登录')
			checkWxLogin()
				.then(res => {
					let pages = getCurrentPages();
					let currPage = pages[pages.length - 1];
					if (currPage && currPage.data.isHidden !== undefined) {
						currPage.isHidden = true;
					}
					if (res.isLogin) {
						if (!checkLogin())
							return Promise.reject({
								authSetting: true,
								msg: '用户token失效',
								userInfo: res.userInfo
							});
						this.$emit('onLoadFun', this.userInfo);
					} else {
						wx.showLoading({ title: '正在登录中' });
						this.setUserInfo(res.userInfo, true);
					}
				})
				.catch(res => {
					if (res.authSetting === false) {
						//没有授权不会自动弹出登录框
						if (this.isAuto === false) return;
						//自动弹出授权
						this.isHidden = false
					} else if (res.authSetting) {
						//授权后登录token失效了
						that.setUserInfo(res.userInfo);
					}
				});
		},
		/**
		 * 授权
		 * @param userInfo
		 * @param isLogin
		 */
		setUserInfo(userInfo, isLogin) {
			let that = this;
			wx.showLoading({ title: '正在登录中' });
			if (isLogin) {
				that.getWxUserInfo(userInfo);
			} else {
				getCodeLogin(res => {
					wxGetUserInfo()
						.then(userInfo => {
							userInfo.code = res;
							that.getWxUserInfo(userInfo);
						})
						.catch(res => {
							wx.hideLoading();
						});
				});
			}
		},
		/**
		 *
		 * @param userInfo
		 */
		getWxUserInfo(userInfo) {
			let that = this;
			console.info('code: ' + userInfo.code);
			userInfo.spread_spid = getApp().globalData.spid; //获取推广人ID
			userInfo.spread_code = getApp().globalData.code; //获取推广人分享二维码ID
			login(userInfo)
				.then(res => {
					this.setToken(res.result.token);
					this.setUser(res.result.userInfo);
					// getApp().globalData.userInfo = res.result.userInfo;
					// uni.setStorage({ key: 'cache_key', data: userInfo.code });
					//取消登录提示
					wx.hideLoading();
					//关闭登录弹出窗口
					this.isHidden = true;
					this.errorSum = 0;
					//执行登录完成回调
					this.$emit('onLoadFun', getApp().globalData.userInfo);
				})
				.catch(err => {
					wx.hideLoading();
					this.errorSum++;
					if (this.errorSum >= this.errorNum) {
						// Tips({title: err});
					} else {
						that.setUserInfo(userInfo);
					}
				});
		},
		/**
		 * 关闭
		 */
		close() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (this.isGoIndex) {
				wx.switchTab({ url: '/pages/tabbar/index' });
			} else {
				this.isHidden = true;
				if (currPage && currPage.data.isHidden !== undefined) {
					currPage.isHidden = true;
				}
			}
		}
	}
};
</script>

<style>
.Popup {
	width: 500upx;
	background-color: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -250upx;
	transform: translateY(-50%);
	z-index: 320;
	display: none;
	border-radius: 10px;
}

.Popup image {
	width: 150upx;
	height: 150upx;
	margin: -67upx auto 0 auto;
	display: block;
	border: 8upx solid #fff;
	border-radius: 50%;
}

.Popup .title {
	font-size: 28upx;
	color: #000;
	text-align: center;
	margin-top: 30upx;
}

.Popup .tip {
	font-size: 22upx;
	color: #555;
	padding: 0 24upx;
	margin-top: 25upx;
}

.Popup .bottom .item {
	width: 50%;
	height: 80upx;
	background-color: #eeeeee;
	text-align: center;
	line-height: 80upx;
	font-size: 24upx;
	color: #666;
	margin-top: 54upx;
	border-radius: 0 0 0 10px;
}

.Popup .bottom .item.on {
	width: 100%;
}

.flex {
	display: flex;
}

.Popup .bottom .item.grant {
	font-size: 28upx;
	color: #fff;
	font-weight: bold;
	background-color: #a5c3f7;
	border-radius: 0;
	padding: 0;
	border-radius: 0 0 10px 0;

}

.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.65);
	z-index: 310;
	display: none;
}
.show {
	display: block;
}
</style>
